<template>
    <div class="wrap">
        <div class="card">
            <div class="label title"><span>*</span>期望工作类型</div>
            <div class="value">
                <div class="label">是否不限？</div>
                <van-radio-group class="check-wrap" :value="jobType" @change="changeType">
                    <van-radio name="0">不限</van-radio>
                    <van-radio name="1" class="checked-mar">按以下期望</van-radio>
                </van-radio-group>
            </div>
            <div class="typs-list" v-if="jobType == 1">
                <van-checkbox-group :value="typeList" @change="changeListType" class="checked-group">
                    <van-checkbox
                        v-for="item in typeOptions"
                        :key="item.value"
                        :name="item.value"
                    >
                        {{item.name}}
                    </van-checkbox>
                </van-checkbox-group>
            </div>
        </div>
        <div class="card">
            <div class="label title"><span>*</span>期望工作时间</div>
            <div class="value">
                <div class="label">是否不限？</div>
                <van-radio-group class="check-wrap" :value="timeType" @change="changeTime">
                    <van-radio name="0">不限</van-radio>
                    <van-radio name="1" class="checked-mar">按以下期望</van-radio>
                </van-radio-group>
            </div>
            <div class="typs-list" v-if="timeType == 1">
                <van-checkbox-group :value="timeList" @change="changeListTime" class="checked-group">
                    <van-checkbox
                        v-for="item in timeOptions"
                        :key="item.value"
                        :name="item.value"
                    >
                        {{item.name}}
                    </van-checkbox>
                </van-checkbox-group>
            </div>
        </div>
        <div class="card item select-icon select-icon--right titile--margin" @click="showAlert">
            <div class="label title"><span>*</span>期望上班类型</div>
            <div class="value">
                <div class="select-value">
                    <span class="select-default" v-if="!workObj.name">请选择</span>
                    <span v-else>{{workObj.name}}</span>
                </div>
            </div>

        </div>
        <div class="card">
            <div class="value">
                <div class="label title titile--margin"><span>*</span>是否支持全职上班</div>
                <van-radio-group class="check-wrap" :value="isFullTimeWork" @change="changeJob">
                    <van-radio name="1">可</van-radio>
                    <van-radio name="0" class="checked-mar">否</van-radio>
                </van-radio-group>
            </div>
        </div>
        <van-action-sheet :show="visibleWork" @close="visibleWork = false">
            <van-picker value-key="name" :columns="workOption" @cancel="showAlert" @confirm="changeWorkType" :show-toolbar="true" title="选择工作类型"/>
        </van-action-sheet>
        <div class="theme-btn btn" @click="submit">保存</div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            visibleWork: false,
            typeList: [],
            typeOptions: [],
            timeOptions: [],
            workOption: [],
            jobType: '0',
            timeType: '0',
            isFullTimeWork: '0',
            timeList: [],
            workObj: {}
        };
    },
    methods: {
        changeType(e) {
            this.jobType = e.mp.detail;
        },
        changeListType(e) {
            this.typeList = e.mp.detail;
        },
        changeListTime(e) {
            this.timeList = e.mp.detail;
        },
        changeTime(e) {
            this.timeType = e.mp.detail;
        },
        changeJob(e) {
            this.isFullTimeWork = e.mp.detail;
        },
        changeWorkType(e) {
            this.workObj = e.mp.detail.value;
            this.showAlert();
        },
        showAlert() {
            this.visibleWork = !this.visibleWork;
        },
        submit() {

            if(this.jobType == 1 && this.typeList.length === 0){
                wx.showToast({
                    title: '工作类型最少选择一项',
                    icon: 'none',
                    duration: 2000,
                    mask: false,
                });
                return;
            }
            if(this.timeType == 1 && this.timeList.length === 0){
                wx.showToast({
                    title: '工作时间最少选择一项',
                    icon: 'none',
                    duration: 2000,
                    mask: false,
                });
                return;
            }
            if(!this.workObj.value){
                wx.showToast({
                    title: '上班类型不能为空',
                    icon: 'none',
                    duration: 2000,
                    mask: false,
                });
                return;
            }
            this.$api.saveEditJobExpect({
                //工作类型（数据字典）多个用 逗号 连接
                jobType: this.jobType == 0 ? undefined : this.typeList.join(','),
                //是否支持全职上班 1:支持 0：不支持
                isFullTimeWork: this.isFullTimeWork,
                //可上班时间（数据字典）
                workTimeType: this.timeType == 0 ? undefined : this.timeList.join(','),
                //期望工作时间类型（数据字典）多个
                shortWorkTimeType: this.workObj.value,
                //工作类型限制 1：是 0:否
                jobTypeLimit: this.jobType,
                //短期工作时间限制 1:是 0:否
                shortWorkTimeTypeLimit: this.timeType,
            }).then(res => {
                wx.navigateBack({
                    delta: 1
                });
            });
        }
    },
    onLoad(e){
        Object.assign(this.$data, this.$options.data());
        const disc = wx.getStorageSync("dictList");
        this.workOption = disc.shortWorkTimeTypes;
        this.typeOptions = disc.jobTypes;
        this.timeOptions = disc.workTimeTypes;
        if(e.item){
            let item = JSON.parse(e.item);
            console.log(item);
            this.jobType = item.jobTypeLimit + '';
            this.typeList = item.jobType.split(',');
            this.isFullTimeWork = item.isFullTimeWork + '';
            this.timeType = item.shortWorkTimeTypeLimit + '';
            this.timeList = item.shortWorkTimeType.split(',');
            this.workObj = disc.shortWorkTimeTypes.find(i => {
                return i.value == item.workTimeType;
            });
        }
    }
}
</script>
<style lang="scss" scoped>
.wrap {
    padding: 15px;
    height: calc(100% - 30px);
    background: $grey-bg;
}
.card {
    background: #fff;
    margin-bottom: 10px;
}
.title {
    line-height: 24px;
    font-size: 13px;
    color: #40444C;
}
.textarea {
    width: 100%;
    height: 167px;
    border-radius: 4px;
    border: 1px solid $grey-border-color;
    padding: 10px 15px;
    box-sizing: border-box;
}
.btn {
    position: absolute;
    bottom: 36px;
    left: 15px;
    right: 15px;
}
.label {
    color: #40444C;
    span {
        color: $theme-color;
        margin-right: 5px;
    }
}
.title {
    height: 44px;
    line-height: 44px;
    padding: 0px 15px;
    border-bottom: 1px solid $grey-border-color;
}
.value {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 15px;
}
.check-wrap {
    display: flex;
    height: 44px;
    align-items: center;
}
.checked-mar {
    margin-left: 10px;
}
.checked-group {
    display: flex;
    height: 44px;
    align-items: center;
    justify-content: space-around;
    font-size: 12px;
}
.select-default {
    color: #C1C4C9;
}
.value {
    color: $color-text;
}
.right-text {
    text-align: right;
}
.select-value {
    span {
        padding-right: 20px;
    }
}
.item {
    display: flex;
    height: 40px;
    align-items: center;
    justify-content: space-between;
    padding: 0px 15px;
    box-sizing: border-box;
    font-size: 12px;
    border-bottom: 1px solid $grey-border-color;
}
.titile--margin {
    padding: 0px;
}
</style>